import React from 'react';
import QueueAnim from 'rc-queue-anim';
import { Row, Col, Button } from 'antd';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import { LogButton } from './utils';




export const isImg = /([\w-]+\.)+[\w-]+(jpg|png|jpeg|svg)?/;

class Content extends React.PureComponent {



  getChildrenToRender = (item, i) => {
    let tag = item.name.indexOf('title') === 0 ? 'h1' : 'div';
    tag = item.href ? 'a' : tag;
    let children = typeof item.children === 'string' && (item.children.match(isImg) || ['img', 'image'].includes(item?.name))
      ? React.createElement('img', { src: item.children, alt: 'img' })
      : item.children;

    if (!!(item?.isLogButton)) {
      children = React.createElement(LogButton, {
        ...item.children
      });
    }

    if (item?.name === "button" && typeof item?.children === 'object') {
      children = React.createElement(Button, {
        ...item.children
      });
    }


    return React.createElement(tag, { key: i.toString(), ...item }, children);
  };


  render() {
    const { dataSource, isMobile, ...props } = this.props;
    const {
      wrapper,
      titleWrapper,
      page,
      OverPack: overPackData,
      childWrapper,
    } = dataSource;
    return (
      <div {...props} {...wrapper}>
        <div {...page}>
          <div {...titleWrapper}>
            {titleWrapper.children.map(this.getChildrenToRender)}
          </div>
          <OverPack {...overPackData}>
            <QueueAnim
              type="bottom"
              key="block"
              animConfig={{ translateY: [0, 300] }}
              leaveReverse
              component={Row}
              componentProps={childWrapper}
            >
              {childWrapper.children.map((block, i) => {
                const { children: item, ...blockProps } = block;
                return (
                  <Col key={i.toString()} {...blockProps}>
                    <div {...item}>
                      {item.children.map(this.getChildrenToRender)}
                    </div>
                  </Col>
                );
              })}
            </QueueAnim>
          </OverPack>
        </div>
      </div>
    );
  }
}

export default Content;
